<%--
  Created by IntelliJ IDEA.
  User: chenpengcheng
  Date: 2021/5/21
  Time: 14:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜品搜索</title>
</head>
<style>
    .main {
        border: solid 1px red;
        margin: 0 auto;
        width: 800px;
        height: 100%;

    }
    .container {
        width: 500px;
        height: 50px;
        margin: 100px auto;
    }

    .parent {
        width: 100%;
        height: 42px;
        top: 4px;
        position: relative;
    }

    .parent>input:first-of-type {
        /*输入框高度设置为40px, border占据2px，总高度为42px*/
        width: 380px;
        height: 40px;
        border: 1px solid #ccc;
        font-size: 16px;
        outline: none;
    }

    .parent>input:first-of-type:focus {
        border: 1px solid #317ef3;
        padding-left: 10px;
    }

    .parent>input:last-of-type {
        /*button按钮border并不占据外围大小，设置高度42px*/
        width: 100px;
        height: 44px;
        position: absolute;
        background: #317ef3;
        border: 1px solid #317ef3;
        color: #fff;
        font-size: 16px;
        outline: none;
    }
</style>
<body>
    <div class="main">
        <div class="container">
            <form action="" class="parent">
                <input type="text">
                <input type="button" value="搜索">

            </form>
        </div>
    </div>
</body>
</html>
